<!-- 厂区下拉框 -->
<template>
  <px-form-item
    :label="label || '厂区'"
    :prop="props.propValue ? props.propValue : 'factoryArea'"
    :rules="{ required: props.isRequired, message: '厂区不能为空', trigger: 'change' }"
  >
    <px-select v-model="factoryVal" :disabled="isDisabled" clearable filterable placeholder="请选择厂区" style="width: 100%" @change="changeFactory">
      <px-option v-for="item in factoryList" :key="item.code" :label="item.name" :value="item.code" />
    </px-select>
  </px-form-item>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

// 父级方法和值
const emits = defineEmits(["changeFactory"]);
const props = defineProps(["facCode", "isRequired", "propValue", "isDisabled", "label"]);

const factoryVal = ref("");
const factoryList = ref([]);

watch(
  () => props.facCode,
  val => {
    factoryVal.value = props.facCode;
  },
  { immediate: true }
);

factoryList.value = JSON.parse(localStorage.getItem("facList"));

// 改变工厂值，传值给父级并做改变
const changeFactory = () => {
  emits("changeFactory", factoryVal.value);
};
</script>
